<template>
  <el-drawer
    v-model="detailVisible"
    title="会议详情"
    :with-header="false"
    size="50%"
  >
    <div class="create-wrapper">
      <el-card>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :inline="true"
          class="demo-ruleForm demo-form-inline"
          :size="formSize"
          status-icon
          label-width="auto"
          scroll-to-error
          disabled
        >
          <el-row justify="center" :gutter="20">
            <el-col :span="12">
              <el-form-item label="会议名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议时间" prop="between">
                <el-date-picker
                  class="w-350"
                  v-model="ruleForm.between"
                  type="datetimerange"
                  range-separator="~"
                  clearable
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="会议地点" prop="location">
                <el-input v-model="ruleForm.location" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-col :span="24">
              <el-form-item label="会议主题" prop="theme" style="width: 100%">
                <el-input
                  v-model="ruleForm.theme"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center" :gutter="20">
            <el-col :span="24">
              <el-form-item label="参会人员" style="width: 100%">
                <el-select
                  multiple
                  filterable
                  remote
                  v-model="ruleForm.participants"
                  reserve-keyword
                  placeholder="请搜索选择参会人员"
                  remote-show-suffix
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in participantList"
                    :key="item.user_info_id"
                    :label="item.name"
                    :value="item.user_info_id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center" :gutter="20">
            <el-col :span="12">
              <el-form-item label="发起人">
                <el-input v-model="ruleForm.promoter" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="记录人" prop="recorder">
                <el-input v-model="ruleForm.recorder" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主持人" prop="president">
                <el-input v-model="ruleForm.president" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="外部参会人" prop="foreign">
                <el-input v-model="ruleForm.foreign" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="会议录音"
                prop="material"
                style="align-items: center !important"
              >
                <div class="upload-wrapper">
                  <div class="drag-wrapper" v-if="fileList.length">
                    <div class="sortable-wrapper">
                      <div
                        class="audio-item"
                        v-for="(item, index) in fileList"
                        :key="index"
                      >
                        <el-icon :size="24"><VideoPlay /></el-icon>
                        <span>{{ item.file_name }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="会议资料"
                prop="annex"
                style="align-items: center !important"
              >
                <div class="upload-wrapper">
                  <div class="drag-wrapper" v-if="meetingFileList.length">
                    <div class="sortable-wrapper">
                      <div
                        class="audio-item"
                        v-for="(item, index) in meetingFileList"
                        :key="index"
                        @click="handlePreview(item)"
                        style="cursor: pointer"
                      >
                        <el-icon :size="24"><Document /></el-icon>
                        <span>{{ item.file_name }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </el-drawer>
  <document-viewer
    :file-name="showFileName"
    :ext="showFileExt"
    v-model:show="showFileEnable"
    :url="showFileUrl"
  />
</template>
<script setup>
import { ref, reactive } from 'vue'
import DocumentViewer from '@/components/document-viewer/index.vue'
import { httpSelectMeeting, httpGetMeetingPeoples } from '@/api/meeting.js'
import { debounce } from '@/utils/tools.ts'
const detailVisible = defineModel()
const ruleFormRef = ref()
const formSize = ref('default')
const ruleForm = reactive({
  name: '', // 会议名称
  location: '', // 会议地点
  theme: '', // 会议主题
  participants: '', // 参会人员
  promoter: '', // 发起人
  recorder: '', // 记录人
  president: '', // 主持人
  material: [], // 会议音频列表
  meeting_start: '', // 开始时间
  meeting_end: '', // 结束时间
  between: [], // 开始时间 结束时间
  foreign: '', //外部参会人
  annex: [], // 会议资料
})
const participantList = ref([]) // 参会人员
const fileList = ref([]) // 上传的音频
const meetingFileList = ref([])
const loading = ref(false)
const showFileEnable = ref(false)
const showFileUrl = ref('')
const showFileName = ref('')
const showFileExt = ref('')
const host = import.meta.env.VITE_BASE_API
const getFileExt = (filename) => {
  const name_arr = filename.split('.')
  if (name_arr.length <= 1) {
    return '._'
  } else {
    return '.' + name_arr[name_arr.length - 1]
  }
}

const handlePreview = (item) => {
  showFileExt.value = getFileExt(item.file_name)
  showFileName.value = item.file_name
  showFileUrl.value = host + `/file/download?file_id=${item.file_id}&preview=1`
  showFileEnable.value = true
}
const getPeopleList = async (name = '') => {
  loading.value = true
  let list = []
  try {
    const { list } = await httpGetMeetingPeoples({ name_code: name })
    if (!list.length) return
    participantList.value = list.filter((item) => {
      item.name = item.name + item.code
      return name ? item.name.toLowerCase().includes(name.toLowerCase()) : item
    })
  } finally {
    loading.value = false
  }
  return list
}
const remoteMethod = debounce(getPeopleList, 500)
const initData = async (id) => {
  const res = await httpSelectMeeting({
    meeting_id: parseInt(id),
  })
  if (res.list && res.list.length) {
    let obj = res.list[0]
    if (obj.participants.length) {
      obj.participants.forEach((item) => {
        item.name = item.name + item.code
        participantList.value.push(item)
      })
    }
    ruleForm.name = obj.name
    ruleForm.location = obj.location
    ruleForm.material = obj.material
    ruleForm.between = [
      obj.meeting_start.replace('T', ' '),
      obj.meeting_end.replace('T', ' '),
    ]
    ruleForm.participants =
      obj.participants && obj.participants.map((x) => x.user_info_id)
    ruleForm.promoter = obj.promoter
    ruleForm.recorder = obj.recorder
    ruleForm.president = obj.president
    ruleForm.theme = obj.theme
    ruleForm.annex = obj.annex
    ruleForm.foreign = obj.foreign
    fileList.value = obj.material
    meetingFileList.value = obj.annex
  }
}

defineExpose({
  initData,
})
</script>

<style scoped lang="scss">
:deep(.el-upload-list) {
  display: none !important;
}
.upload-wrapper {
  display: flex;
  align-items: center;
  width: 100% !important;
}
.drag-wrapper {
  width: 100%;
  border-radius: 4px;
  margin-left: 10px;
  .sortable-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 1px;
    padding: 10px;
  }
  .audio-item {
    display: flex;
    gap: 4px;
    padding: 2px 10px;
    width: fit-content;
    height: 40px;
    align-items: center;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }
}
</style>
